<template>
  <div class="popup-signature">
    <div class="signature">
      <div id="canvas"></div>
    </div>
    <div class="handle-back">
      *建议用手机横向签名
    </div>
    <div class="button-content">
      <mt-button type="default" id="clearCanvas">重新签名</mt-button>
      <mt-button type="default" @click="handleBack">返回</mt-button>
    </div>
    <div class="button-content" style="padding-top:10px;">
      <mt-button type="primary" id="saveCanvas" @click="saveSign">确定保存</mt-button>
    </div>
    <img :src="imgUrl"/>
  </div>
</template>

<script>
  import { Toast} from 'mint-ui';
  export default {
    data() {
      return {
        isAutograph:false,
        imgUrl:'',
      };
    },
    mounted() {
//      document.addEventListener(
//        "touchmove",
//        function(event) {
//          event.preventDefault();
//        },
//        { passive: false }
//      );

      this.init_lineCanvas();
    },
    methods: {
      // 保存签名
      saveSign() {
        if(this.isAutograph==false){
          Toast({
            message:"请输入您的签名",
            position: 'middle',
            duration: 1200
          });
          return false
        }
        this.$emit('autographSure',this.canvas.toDataURL());
      },
      init_lineCanvas() {

        new this.lineCanvas({
          el: document.getElementById("canvas"), // 绘制canvas的父级div
          clearEl: document.getElementById("clearCanvas"), // 清除按钮
          saveEl: document.getElementById("saveCanvas"), // 保存按钮
          linewidth: 2, // 线条粗细，选填
          color: "black", // 线条颜色，选填
          background: "#ffffff" // 线条背景，选填
        });
      },
      /* 电子签名手写板 */
      lineCanvas(obj) {
        this.linewidth = 2;
        this.color = "#000000";
        this.background = "#ffffff";
        for (var i in obj) {
          this[i] = obj[i];
        }
        this.canvas = document.createElement("canvas");
        this.el.appendChild(this.canvas);
        this.cxt = this.canvas.getContext("2d");
        this.canvas.width = 410;
        this.canvas.height = 382;
        this.cxt.fillStyle = this.background;
        this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
        this.cxt.strokeStyle = this.color;
        this.cxt.lineWidth = this.linewidth;
        this.cxt.lineCap = "round";
        // 开始绘制
        this.canvas.addEventListener(
          "touchstart",
          function(e) {
            console.log('开始绘制')
            this.isAutograph=true;
            this.cxt.beginPath();
            this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
          }.bind(this),
          false
        );
        // 绘制中
        this.canvas.addEventListener(
          "touchmove",
          function(e) {
            this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
            this.cxt.stroke();
          }.bind(this),
          false
        );
        // 结束绘制
        this.canvas.addEventListener(
          "touchend",
          function() {
            console.log('结束绘制')
            this.cxt.closePath();
          }.bind(this),
          false
        );
        // 清除画布
        this.clearEl.addEventListener(
          "click",
          function() {
            this.isAutograph=false;
            console.log('清除画布')
            this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
          }.bind(this),
          false
        );
        document.getElementById("clearCanvas").click();
        // 保存图片，直接转base64
//        this.saveEl.addEventListener(
//          "click",
//          function() {
//            var imgBase64 = this.canvas.toDataURL();
//            console.log("保存签名成功" + imgBase64);
//            // sessionStorage.setItem("imgBase64", imgBase64);
//          }.bind(this),
//          false
//        );
      },
      handleBack(){
        this.$emit('popupAutographClose');
      }
    }
  };
</script>

<style>
  .signature {
    /*width: 100%;*/
    /*height:430px;*/
    /*background: #fff;*/
    /*margin-bottom: 10px;*/
    /*position: relative;*/
  }
  #canvas canvas {
    background: #f3f3f3;
  }
  .popup-signature .button-content{
    padding:12px;
  }
  .popup-signature .button-content .mint-button{
    margin:0 10px;
  }
  .popup-signature .handle-back{
    padding:8px 10px;
    font-size: 14px;
    text-align: center;
    color: red;
  }
  .popup-signature .handle-back .button-back{
    display: block;
    float: left;
    color: #26a2ff;
  }
  .popup-signature .handle-back .iconfont{
    display: inline-block;
    margin-right: 4px;
    transform: rotate(180deg);
  }
</style>
